---
title: "Accessibility Checker Rule Help: HAAC_Combobox_DOM_Focus"
---
import "../../../styles/ToolHelp.scss"
import { CodeSnippet, Tag } from "carbon-components-react";

<div className="toolHelp">
<Row>
<Column colLg={16} colMd={8} colSm={4} className="toolHead">

### Initial DOM focus is not correctly set on the combobox

<div id="locLevel"></div>

Initial DOM focus on the combobox must be set on the `<text>` input

</Column>
</Row>
<Row>
<Column colLg={11} colMd={5} colSm={4} className="toolMain">

### Why is this important?

A combobox is a UI interactive component that combines an input and another element, such as a listbox or grid, that can dynamically pop up to help the user set the value of the input. When a combobox receives focus, the focus should be set on the `<text>` input element that can either display the current value or supports editing, so people who use assistive technologies are able accurately navigate and interact with the content.

<div id="locSnippet"></div>

### What to do

* Set the initial DOM focus only on the combobox’s `<text>` input element. (Note: This was necessary for the Combobox using ARIA 1.1 implementation which should be avoided due to problems with implementation. Follow the guidance for combobox in [ARIA 1.2](https://www.w3.org/TR/wai-aria-1.2/#combobox) which has changed significantly.)

</Column>
<Column colLg={5} colMd={3} colSm={4} className="toolLeft">

### About this requirement

[IBM 4.1.2 Name, Role, Value](https://www.ibm.com/able/requirements/requirements/#4_1_2)
[WAI-ARIA v1.2 Authoring Practices - Combobox](https://www.w3.org/TR/wai-aria-practices-1.2/#combobox)

### Who does this affect?

* People using a screen reader, including blind, low vision and neurodivergent people

</Column>
</Row>
</div>

export default ({ children, _frontmatter }) => (<React.Fragment>{children}</React.Fragment>)
